<template>
    <div>
        <h1>显示列表</h1>
        房型名称
        <input type="text" v-model="datalist.uname">
        状态
        <input type="radio" v-model="datalist.zt" name="sex" :value="1">开启
        <input type="radio" v-model="datalist.zt" name="sex" :value="2">停用
       
        <input type="button" value="查询" @click="getdata">
        <input type="button" value="重置" @click="cz">
        <table class="table">
            <thead>
                <tr>
                    <td>房型名称</td>
                    <td>门市销售价格</td>
                    <td>房间数</td>
                    <td>状态</td>
                    <td>房间号</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>{{a.FXname}}</td>
                    <td>{{a.Jine}}</td>
                    <td>{{a.Houscount}}</td>
                    <td>{{a.zhuangtai==1?"启用":"停用"}}</td>
                    <td>{{a.FHname}}</td>
                    <td>
                        <input type="button" value="逻辑删除" @click="luo(a.FhId)">
                    </td>
                    <td>
                        <input type="button" value="编辑" @click="ft(a.FhId)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    当前第{{datalist.pagindex}}页，每页{{datalist.pagsize}}条，一共{{datazong.zongtiao}}条，一共{{datazong.zongye}}页
    <input type="button" value="首页" @click="fanye(1)">
    <input type="button" value="上一页" @click="fanye(2)">

    <input v-for="a in datazong.zongye" type="button" :value="a" @click="zhiding(a)">

    <input type="button" value="下一页" @click="fanye(3)">
    <input type="button" value="尾页" @click="fanye(4)">
    <select v-model="datalist.pagsize" @click="rong">
        <option :value="2">2</option>
        <option :value="3">3</option>
        <option :value="4">4</option>
    </select>
    <input  type="number" v-model="jue"  @change="tiao(jue)" style="width: 50px;">
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
//实例化】
const router=useRouter();
const data=ref([{
      "FhId": 7,
      "FXname": "大床房",
      "Jine": 98,
      "IsDelete": true,
      "Houscount": 4,
      "zhuangtai": 1,
      "FHname": "112,113,114,115"
}]);
//条件Model
const datalist=ref({
    uname:"",
    zt:0,
    pagindex:1,
    pagsize:2
});
//反填跳转
const ft=(val:any)=>{
    router.push({path:"/xg",query:{id:val}});
}
const datazong=ref({
    zongtiao:0,
    zongye:0
})
const luo=(val:any)=>{
    if(!confirm("您真的要逻辑删除吗？"))
    {
        return;
    }
    axios.delete("https://localhost:7276/api/Fh/Deleteluo",{params:{id:val}}).then(res=>{
        if(res.data>0)
        {
            alert("逻辑删除成功了");
            getdata();
        }
        else
        {
            alert("逻辑删除失败了");
        }
    })
}
//重置
const cz=()=>(
    datalist.value={ uname:"",
    zt:0,
    pagindex:1,
    pagsize:2},
    getdata()
);
//指定页
const zhiding=(val:any)=>{
    datalist.value.pagindex=val;
    getdata();
}
const rong=(val:any)=>{
    getdata();
}
//跳转
const jue=ref<number>();
const tiao=(val:any)=>{
    if(val>=1 && val<=datazong.value.zongye)
    {
        datalist.value.pagindex=val;
        getdata();
    }
}
onMounted(()=>{
    getdata();
})
//翻页
const fanye=(val:any)=>{
    if(val==1)
    {
        datalist.value.pagindex=1;
        getdata();
    }
    if(val==2)
    {
        if(datalist.value.pagindex>1)
        {
            datalist.value.pagindex -=1
            getdata();
        }
    }
    if(val==3)
    {
        if(datalist.value.pagindex<datazong.value.zongye)
        {
            datalist.value.pagindex +=1
            getdata();
        }
    }
    if(val==4)
    {
        datalist.value.pagindex=datazong.value.zongye;
        getdata();
    }
}
const getdata=()=>{
    axios.get("https://localhost:7276/api/Fh/ShowFh",{params:datalist.value}).then(res=>{
        data.value=res.data.list;
        //计算总条数
        datazong.value.zongtiao=res.data.data;
        //计算总页数
        datazong.value.zongye=Math.ceil(datazong.value.zongtiao/datalist.value.pagsize);
    })
}

</script>

<style scoped>

</style>